@import

    '../base/mixin',
    '../base/variable';

/* 三等分 */
.ui-grid-trisect {
    overflow: hidden;

    padding: 10px 3px 0 10px;

    > li {
        position: relative;

        float: left;

        -webkit-box-sizing: border-box;
        width: 33.3333%;
        padding: 0 7px 10px 0;
    }

    h4 {
        font-size: 12px;

        position: relative;

        margin: 7px 0 3px;

        span {
            display: inline-block;

            margin-left: 12px;

            color: $txt-info;
        }
    }
}

.ui-grid-trisect-img {
    padding-top: 149.47%;
}


/* 二等分 */
.ui-grid-halve {
    overflow: hidden;

    padding: 10px 0 0 10px;

    > li {
        position: relative;

        float: left;

        -webkit-box-sizing: border-box;
        width: 50%;
        padding: 0 10px 10px 0;
    }
}

.ui-grid-halve-img {
    padding-top: 55.17%;
}

.ui-grid-trisect-img,
.ui-grid-halve-img {
    @include content-img;

    width: 100%;

    &.active {
        opacity: .5;
    }
}

.ui-row {
    display: block;
}

.ui-col {
    float: left;

    box-sizing: border-box;
    width: 100%;
}

.ui-col-10 {
    width: 10%;
}

.ui-col-20 {
    width: 20%;
}

.ui-col-25 {
    width: 25%;
}

.ui-col-33 {
    width: 33.3333%;
}

.ui-col-50 {
    width: 50%;
}

.ui-col-67 {
    width: 66.6666%;
}

.ui-col-75 {
    width: 75%;
}

.ui-col-80 {
    width: 80%;
}

.ui-col-90 {
    width: 90%;
}

.ui-row-flex {
    display: -webkit-box;

    -webkit-box-sizing: border-box;
    width: 100%;

    .ui-col {
        float: none;

        -webkit-box-flex: 1;
    }

    .ui-col-10 {
        max-width: 10%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 10%;
    }

    .ui-col-20 {
        max-width: 20%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 20%;
    }

    .ui-col-25 {
        max-width: 25%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
    }

    .ui-col-33 {
        max-width: 33.3333%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.3333%;
    }

    .ui-col-50 {
        max-width: 50%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
    }

    .ui-col-67 {
        max-width: 66.6666%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.6666%;
    }

    .ui-col-75 {
        max-width: 75%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
    }

    .ui-col-80 {
        max-width: 80%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 80%;
    }

    .ui-col-90 {
        max-width: 90%;

        -webkit-box-flex: 0;
        -webkit-flex: 0 0 90%;
    }
}
